<script setup lang="ts">
import SideBar from '@/components/SideBar.vue';
import GlobalHeader from '@/components/GlobalHeader.vue';
import GlobalTabs from '@/components/GlobalTabs.vue';
import GlobalFooter from '@/components/GlobalFooter.vue';
</script>

<template>
  <div class="main-warpper">
    <aside class="side-bar-wrapper">
      <SideBar />
    </aside>
    <section class="main-container">
      <header style="flex: none;">
        <GlobalHeader />
      </header>
      <header style="flex: none;">
        <GlobalTabs />
      </header>
      <main class="main-content">
        <router-view></router-view>
      </main>
      <footer class="footer-wrapper">
        <GlobalFooter />
      </footer>
    </section>
  </div>
</template>

<style lang="less">
.main-warpper {
  min-height: 100vh;
  .side-bar-wrapper {
    width: 200px;
    background-color: #001529;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
  }
  .main-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f0f2f5;
    margin-left: 200px;
    .main-content {
      flex: 1;
      padding: 24px;
    }
    .footer-wrapper {
      flex: none;
    }
  }
}
</style>
